<template>
    <div class="album-table">
        <el-table :data="albumlist" stripe @cell-click="albumClick" style="cursor: pointer;">
            <el-table-column type="index"></el-table-column>
            <el-table-column width="120px">
                <template v-slot="{ row }">
                    <div class="img">
                        <img v-lazy="row.blurPicUrl" alt="">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" width="450px"></el-table-column>
            <el-table-column>
                <template v-slot="{ row }">
                    <span class="count">{{ row.size }}首</span>
                </template>
            </el-table-column>
            <el-table-column width="300px">
                <template v-slot="{ row }">
                    <span class="time">发行时间：{{ publishTime(row) }}</span>
                </template>

            </el-table-column>
            <el-table-column prop="company"></el-table-column>

        </el-table>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'  
import { useDateFormat } from '@vueuse/core'
const router = useRouter()
const props = defineProps({
    albumlist: {
        type: Array,  
        default: []
    }
})
function publishTime(row) {
    const time = computed(() => {
        return (useDateFormat(row.publishTime, 'YYYY-MM-DD')).value
    })
    return time.value
}

//前往专辑页面
function albumClick(item) {
    router.push({
        name: 'Albumdetail',
        params: {
            id: item.id
        }
    })

}

</script>

<style lang="scss" scoped>
.album-table {
    margin-top: 15px;
}

.img {
    cursor: pointer;
    position: relative;
    height: 60px;
    width: 60px;

    img {
        width: 100%;
        height: 100%;
    }
}

.count {
    color: #969696;
}

.time {
    font-size: 13px;
    color: #969696;
}
</style>